<template>
    <div>
        <lottieLoading v-if='showProgress' :class="fadeOut?'animated fadeOut':''"></lottieLoading>
        <div class='bgFilter' v-if='bgFilter' @click='bgFilter=false;searchAnimation=false;'></div>
        <!-- <el-header class="el-header" :class="elm" style="z-index:1002;background: rgba(46, 48, 51, 0);"
            :style='$pcShow?"":"padding: 0;"'>
            <Header @fnrandomSrc='fnrandomSrc'></Header>
        </el-header> -->

        <el-dialog title="" :visible.sync="centerDialogVisible" width="30%" center style="">
            <el-form ref="form" label-width="80px">
                <el-form-item label="搜索标题">
                    <el-input v-model="searchTypeform.name"></el-input>
                </el-form-item>

                <el-form-item label="按钮背景">
                    <el-color-picker v-model="searchTypeform.background"></el-color-picker>
                    <span style="margin-left: 10px;">{{searchTypeform.background}}</span>
                </el-form-item>

                <el-form-item label="按钮宽度">
                    <el-input-number v-model="searchTypeform.searchWidth" :min="73" :max="130" label="描述文字">
                    </el-input-number>
                </el-form-item>

                <el-form-item label="搜索链接">
                    <el-input v-model="searchTypeform.searchUrl"></el-input>
                </el-form-item>

                <el-form-item label="按钮文本">
                    <el-input v-model="searchTypeform.seachBtn"></el-input>
                </el-form-item>

                <el-form-item label="默认提示">
                    <el-input v-model="searchTypeform.placeHolder"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false;searchType='站内'">取 消</el-button>
                <el-button type="primary" @click="addSearchType()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="collectDialogVisible" width="40%" center style="top:10%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="链接">
                    <el-input placeholder="请输入网址" v-model="collectForm.href">
                    </el-input>
                </el-form-item>

                <el-form-item label="标题">
                    <el-input v-model="collectForm.title" placeholder="可不填,自动获取"></el-input>
                </el-form-item>

                <el-form-item label="图标">
                    <el-input v-model="collectForm.icon" placeholder="可不填,自动获取"></el-input>
                    <el-upload class="upload-demo" :action="upImgUrl" :on-success='uploadSuccess'>
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="collectDialogVisible = false;">取 消</el-button>
                <el-button type="primary" @click="addCollect()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="editcollectDialogVisible" width="40%" center style="top:10%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="链接">
                    <el-input placeholder="请输入网址" v-model="editCollectForm.href">
                    </el-input>
                </el-form-item>

                <el-form-item label="标题">
                    <el-input v-model="editCollectForm.title" placeholder="可不填,自动获取"></el-input>
                </el-form-item>

                <el-form-item label="图标">
                    <el-input v-model="editCollectForm.icon" placeholder="可不填,自动获取"></el-input>
                    <el-upload class="upload-demo" :action="upImgUrl" :on-success='uploadSuccessEdit'>
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editcollectDialogVisible = false;editCollectForm={title: '',icon: '',href: ''};">取 消
                </el-button>
                <el-button type="primary" @click="editCollect()">确 定</el-button>
            </span>
        </el-dialog>

        <div v-if='!show'>
            该用户无内容
        </div>
        <el-container v-if='show' style="height: 100%;">
            <!-- 视屏背景搜索条 -->
            <div style="width: 100%;height: 100%;position: relative;">
                <div class="video-container">
                    <div :style="fixStyle" class="filter"></div>
                    <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay" type="video/mp4"
                        style="object-fit: cover;" muted :src="randomSrc">
                    </video>
                </div>

                <div class='logoInput' :style="searchAnimation?'top: 43%;z-index:30;':''">
                    <img class='animated ' :src="$config.head.logo" width='37'
                        style="position: absolute;top: -285%;left: 33%;width: 160px;"
                        :class="searchAnimation?'fadeInDown faster':'fadeOutUp faster'">
                    <i class="iconfont iconarrow-right"
                        style="position: absolute;right: -20px;top: -25px;color: white;font-size: 23px!important;cursor:pointer;"
                        @click='dragPrent= dragPrent - 100'></i>
                    <i class="iconfont iconarrow-lift"
                        style="position: absolute;left:-25px;top: -25px;color: white;font-size: 23px!important;cursor:pointer;"
                        v-if='dragPrent<0' @click='dragPrent= dragPrent + 100'></i>

                    <div class='seachType'
                        style="position: absolute;color: white;user-select:none;overflow: hidden;display: flex;align-items: center;top: -39px;width: 100%;"
                        ref='fatherBox'>
                        <div style="height: 39px;">
                            <div style="position: absolute;left: 0%;transition:all .5s;white-space: nowrap;height: 48px;line-height: 48px;"
                                @mousedown="mousedown" :style='"left:" + dragPrent + "px;"' ref='dragBox'>
                                <!-- <span style="padding: 1px 10px 0px 0px;flex-shrink: 0;" @click='fnisEdit'>
                                    <span class='editBtn' style="">编辑</span>
                                </span> -->
                                <span
                                    style="padding: 7px 6px 6px 13px;cursor:pointer;user-select: none;position:relative;margin-right:8px;flex-shrink: 0;"
                                    v-for="(item,index) in searchList" :key='index'
                                    :style='searchType==item.name?"background: white;color: black;border-radius: 1px;":""'
                                    @click='setSearch(item.name)'>
                                    <span style='text-align:center;'>{{item.name}}</span>
                                    <i class='iconfont iconshanchudelete30 deleteBtn' style=""
                                        v-if='item.name!="站内"&&isEdit' @click.stop="deleteSearchType(index)"></i>
                                </span>
                                <span style="padding: 7px 6px 6px 13px;cursor:pointer;user-select: none;" v-if='isEdit'
                                    :style='searchType=="+"?"background: white;color: black;border-radius: 1px;":""'
                                    @click='fnsearchType("+")'>+
                                </span>
                            </div>
                        </div>
                    </div>

                    <i class="iconfont icon-sousuo"
                        style="float: left;height: 50px;line-height: 50px;margin-left: 10px;"></i>

                    <template v-for="(item,index) in searchList">
                        <input type="text" :placeholder="item.placeHolder" v-model='searchtxt' @keyup.enter='fnsearch'
                            v-if="searchType==item.name" :key='"info1"+index'
                            @focus="searchAnimation=true;bgFilter=true;" @input='changeInput'>
                    </template>

                    <template v-for="(item,index) in searchList">
                        <div class="searchBtn animated fadeIn" @click='fnsearch' v-show="searchType==item.name"
                            :key='"info"+index' :style="'width:'+item.searchWidth+'px;background:'+item.background+';'">
                            {{item.seachBtn}}</div>
                    </template>
                </div>
            </div>

            <div class='collectList' :class='searchAnimation?"animated zoomOut faster":"animated zoomIn faster"'>
                <div class='collectClass'>
                    <!-- <span class='collectItem collectEdit' style='float: right;color: white;'
                        >增加</span> -->
                    <!-- <span class='collectItem collectEdit' style='float: right;color: white;'
                        @click="fnisCollectEdit">编辑</span> -->
                    <span class='collectItem' v-if='isCollectEdit' style="float:left;font-size: 22px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" @click='fnaddClass'>+</span>
                    <draggable v-model="collectClass" @update="datadragEnd"
                        :options="{animation:500,sort:true,preventOnFilter:false}">
                        <transition-group>
                            <span class='collectItem drag-item' v-for="(item,index) in collectClass" :key='index'
                                :style='collectIndex==index?"background: rgba(76, 76, 76, 0.68);":""'
                                @click='collectIndex=index; currentList = collectClass[collectIndex].childerList;'
                                style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position:relative;cursor:pointer;">
                                <i v-if='isCollectEdit' class='iconfont iconshanchudelete30'
                                    style="position: absolute;right: 4%;top: -30%;font-size: 10px;color: white;"
                                    @click.stop='fnDeleteClass(index)'></i>
                                <i v-if='isCollectEdit' class='iconfont iconbianjiqianbixieshuru2'
                                    @click.stop='fnEditClass(index)'
                                    style="position: absolute;left: 2%;top: -30%;font-size: 4px;transform: scale(0.8);color: white;"></i>
                                {{item.class}}
                            </span>
                        </transition-group>
                    </draggable>
                </div>

                <div class='collectConent' style="z-index:3;">
                    <draggable v-model="currentList" @update="datadragEnd2" :options="{animation:500}">
                        <transition-group>
                            <div class='collectSq' v-for="(item,index) in currentList" :key='index'
                                @click='jump(item.href)'>
                                <i v-if='isCollectEdit' class='iconfont iconshanchudelete30'
                                    @click.stop='deleteCollect(item.id)'
                                    style="position: absolute;right: 2%;top: -42%;color: white;"></i>
                                <i v-if='isCollectEdit' class='iconfont iconbianjiqianbixieshuru2'
                                    @click.stop='fnEditCollect(item.id)'
                                    style="position: absolute;top: -42%;color: white;left: 3%;font-size: 10px;"></i>
                                <img :onerror="errorImg" :src='item.icon' width="35px" height="35px" :key='item.icon'>
                                <el-tooltip class="item" effect="light" :content="item.title" placement="bottom"
                                    v-if='item.title.length>5'>
                                    <span>{{item.title}}</span>
                                </el-tooltip>
                                <span v-else>{{item.title}}</span>
                            </div>
                        </transition-group>
                    </draggable>
                    <div class='collectSq' @click="fnaddCollect" v-if='isCollectEdit'>
                        <img :onerror="errorImg" src='../../assets/img/add.png' width="35px" height="35px" style="">
                        <span>新增</span>
                    </div>
                </div>
            </div>

            <!-- 移动端搜索样式 -->
            <div class='' v-if='$route.path=="/" && !$pcShow'
                style='position: absolute;top: 60px;width: 100%;left: 0;border: 0;background: #2b2b2b;height: 50px;'>
                <i class="iconfont icon-sousuo"
                    style="float: left;height: 50px;line-height: 50px;margin-left: 10px;color: white;"></i>
                <input type="text" placeholder="请在这里输入您想要的博客" v-model='searchtxt'
                    style='color: white; height: 94%;width: 60%;border: none;background:#2b2b2b;outline: none;display: inline;padding-left: 10px;'>
                <div class="searchBtn" @click='fnsearch'>搜索</div>
            </div>
        </el-container>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import blog from "../../api/blog";
import nav from "../../api/nav";
import draggable from 'vuedraggable'
export default {
    name: "index",
    components: {
        Header,
        Footer,
        draggable
    },
    data() {
        return {
            upImgUrl: blog.upImgAvatar(),
            showStyle: false,
            isRun: false,
            slogan: null,
            enterAnimate: "animated fadeIn",
            leaveAnimate: "animated fadeOut",
            isScroll: false,
            nowTime: '',
            top: 0,//滚动条位置
            elm: '',//收起动画
            fixStyle: '',
            vedioCanPlay: '',
            randomSrc: 's1',
            searchtxt: '',
            showProgress: false,
            fadeOut: false,//fadeout动画
            pcShow: true,
            searchTypeform: {
                name: '百度',
                background: '#484848',
                searchWidth: '73',
                searchUrl: 'https://www.baidu.com/s?wd=',
                seachBtn: '百度一下',
                placeHolder: '百度一下,你就知道'
            },
            searchList: [],
            searchType: '站内',
            bgFilter: false,
            searchAnimation: false,
            centerDialogVisible: false,
            collectDialogVisible: false,
            editcollectDialogVisible: false,
            isEdit: false,
            isCollectEdit: false,
            dragPrent: 0,
            collectClass: [],
            errorImg: 'this.src=`http://dlhtx.zicp.vip:3000/file/randomAvatar?time=${new Date().getTime()}`',
            collectForm: {
                title: '',
                icon: '',
                href: ''
            },
            editCollectForm: {
                title: '',
                icon: '',
                href: ''
            },
            collectIndex: 0,
            currentList: [],
            show:true,
        };
    },
    watch: {
        '$route': function (newUrl, oldUrl) {
            this.nowTime = new Date().getTime();
        },
    },
    created() {
        // console.log(this.$route.query.name)
        this.getBaseSetting(this.$route.query.name)
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        if (localStorage.getItem('randomSrc')) {
            this.randomSrc = localStorage.getItem('randomSrc')
        } else {
            this.randomSrc = `${this.$config.url.indexVideoSrc}${Math.floor(Math.random() * 17 + 1)}.mp4`
            localStorage.setItem('randomSrc', this.randomSrc)
        }
        window.addEventListener('scroll', this.handleScroll, true);
        window.onresize = () => {
            const windowWidth = document.body.clientWidth
            const windowHeight = document.body.clientHeight
            const windowAspectRatio = windowHeight / windowWidth
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: windowWidth * 0.5625 + 'px',
                    width: windowWidth + 'px',
                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: windowHeight + 'px',
                    width: windowHeight / 0.5625 + 'px',
                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
        }
        window.onresize()
    },
    methods: {
        ...mapActions(["getPermissions"]),
        setSearch(name) {
            this.searchType = name
            localStorage.setItem('searchType', this.searchType)
        },
        getBaseSetting(name) {
            nav.getConfig(name).then(res => {
                if(res.data==''){
                    this.show = false
                }
                var data = JSON.parse(res.data[0].config)
                this.searchList = data.searchList
                this.collectClass = data.collectClass
                this.currentList = this.collectClass[this.collectIndex].childerList
                this.searchType = localStorage.getItem('searchType') ? localStorage.getItem('searchType') : '站内'
                this.$forceUpdate()
                console.log(this.searchList)
            })
        },
        changeInput() {
            if (this.searchType == '站内') {
                if (this.searchtxt == '') {
                    this.getBaseSetting()
                }
            }
        },
        fnrandomSrc() {
            this.randomSrc = `${this.$config.url.indexVideoSrc}${Math.floor(Math.random() * 17 + 1)}.mp4`
            localStorage.setItem('randomSrc', this.randomSrc)
        },
        drang(e) {
            e.preventDefault()
            e.stopPropagation()
            e.originalEvent.preventDefault();
            e.originalEvent.stopPropagation()
        },
        datadragEnd(evt) {
            evt.preventDefault()
            evt.stopPropagation()
            evt.originalEvent.preventDefault();
            evt.originalEvent.stopPropagation()
            this.collectIndex = evt.newIndex
            this.save()
        },
        datadragEnd2(evt) {
            evt.preventDefault();
            this.collectClass[this.collectIndex].childerList = this.currentList
            this.save()
        },
        uploadSuccess(e) {//上传附件
            if (e.success) {
                this.collectForm.icon = e.data
            } else {
                this.$message.error('上传失败')
            }
        },
        uploadSuccessEdit(e) {
            if (e.success) {
                this.editCollectForm.icon = e.data
            } else {
                this.$message.error('上传失败')
            }
        },
        fnEditClass(index) {
            this.$prompt('请输入分类名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: this.collectClass[index].class
            }).then(({ value }) => {
                this.collectClass[index].class = value
                this.save()
            }).catch(() => {

            });
        },
        deleteCollect(id) {
            this.$confirm('此操作将删除该网站, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var spIndex = ''
                this.collectClass[this.collectIndex].childerList.forEach((item, index) => {
                    if (item.id == id) {
                        spIndex = index
                    }
                })
                this.collectClass[this.collectIndex].childerList.splice(spIndex, 1)
                this.currentList = this.collectClass[this.collectIndex].childerList//更新
                this.$forceUpdate()
                //下一步要保存currentList
                this.save()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                });
            });

        },
        fnDeleteClass(index) {
            this.$confirm('此操作将删除该分类和所属的所有网站! 是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.collectClass.splice(index, 1)
                // this.currentList = this.collectClass[this.collectIndex].childerList//更新
                if (this.collectClass.length == 0) {
                    this.currentList = []
                } else {
                    this.collectIndex = 0
                    this.currentList = this.collectClass[0].childerList//更新
                    this.$forceUpdate()
                }
                this.save()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                });
            });
        },
        fnaddClass() {
            this.$prompt('请输入分类名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                if (this.collectClass.length == 0) {
                    this.collectClass.push({ id: 1, class: value, childerList: [] })
                    this.currentList = this.collectClass[this.collectIndex].childerList//更新
                    this.save()
                } else {
                    var lastId = 0
                    this.collectClass.forEach(item => {
                        if (item.id > lastId) {
                            lastId = item.id
                        }
                    })
                    this.collectClass.push({ id: lastId + 1, class: value, childerList: [] })
                    this.currentList = this.collectClass[this.collectIndex].childerList//更新
                    this.save()
                }
            }).catch(() => {

            });

        },
        save() {
            //如果登陆状态,保存到数据库 this.collectClass和this.searchList
            //如果不登录,保存到本地
            console.log('aa')
            var userSetting = {
                searchList: this.searchList,
                collectClass: this.collectClass,
                searchType: this.searchType
            }
            if (!localStorage.getItem('user')) {//没有登陆过
                localStorage.setItem('userSetting', JSON.stringify(userSetting))
            } else {
                localStorage.setItem('userSetting', JSON.stringify(userSetting))//本地也要保存
                nav.saveConfig(JSON.parse(localStorage.getItem('user')).name, JSON.stringify(userSetting)).then(res => {
                })
            }
        },
        fnaddCollect() {
            this.collectDialogVisible = true
        },
        fnEditCollect(id) {
            this.collectClass[this.collectIndex].childerList.forEach((item, index) => {
                if (item.id == id) {
                    this.editCollectForm = item
                }
            })
            this.editcollectDialogVisible = true
        },
        editCollect() {//点击确定的时候
            this.collectClass[this.collectIndex].childerList.forEach((item, index) => {
                if (item.id == this.editCollectForm.id) {
                    item = this.editCollectForm
                }
            })
            this.editcollectDialogVisible = false
            this.save()
        },
        fnisEdit() {
            if (this.isEdit) {
                this.isEdit = false
            } else {
                this.isEdit = true
            }
        },
        fnisCollectEdit() {
            if (this.isCollectEdit) {
                this.isCollectEdit = false
            } else {
                this.isCollectEdit = true
            }
        },
        fnsearchType(name) {
            this.searchType = name
            if (this.searchType == '+') {
                console.log(this.bgFilter)
                // this.bgFilter = true
                // this.searchAnimation = false;
                this.centerDialogVisible = true
            }
        },
        addSearchType() {
            if (this.searchList.some(item => item.name == this.searchTypeform.name)) {
                return this.$message.warning('已存在搜索网站')
            } else {
                var s = this.searchTypeform
                this.searchList.push(s)
                this.searchTypeform = {
                    name: '百度',
                    background: '#484848',
                    searchWidth: '73',
                    searchUrl: 'https://www.baidu.com/s?wd=',
                    seachBtn: '百度一下',
                    placeHolder: '百度一下,你就知道'
                }
                this.searchType = '站内'
                this.centerDialogVisible = false
                this.save()
            }
        },
        deleteSearchType(index) {
            this.$confirm('此操作将删除该搜索引擎, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.searchList.splice(index, 1)
                this.save()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                });
            });
        },

        async addCollect() {
            if (this.collectClass.length == 0) {
                return this.$message.warning('暂无分类')
            }
            if (!this.collectForm.href) {
                return this.$message.warning('链接不可为空')
            }
            if (!this.collectForm.title) {
                let res = await axios.get('https://api.uomg.com/api/get.title?url=' + this.collectForm.href)
                if (res.data.title) {
                    this.collectForm.title = res.data.title
                } else {
                    this.collectForm.title = '未知网址'
                }
            }
            if (!this.collectForm.icon) {
                this.collectForm.icon = "https://api.ooopn.com/ico/api.php?url=" + this.collectForm.href
            }

            if (this.collectClass[this.collectIndex].childerList.some(item => item.title == this.collectForm.title)) {
                return this.$message.warning('已存在同名网站')
            } else {
                var currentId
                if (this.collectClass[this.collectIndex].childerList.length == 0) {
                    currentId = 1
                    this.collectForm.id = currentId
                    this.collectClass[this.collectIndex].childerList.push(this.collectForm)
                    this.collectForm = {
                        title: '',
                        icon: '',
                        href: ''
                    }
                    this.collectDialogVisible = false
                    this.save()
                } else {
                    var lastId = 0
                    this.collectClass[this.collectIndex].childerList.forEach(item => {
                        console.log(item.id)
                        if (item.id > lastId) {
                            lastId = item.id
                        }
                    })
                    console.log(lastId)
                    // var currentClassIndex = this.collectClass[this.collectIndex].childerList.length - 1
                    // var currentId = this.collectClass[this.collectIndex].childerList[currentClassIndex].id + 1
                    this.collectForm.id = lastId + 1

                    this.collectClass[this.collectIndex].childerList.push(this.collectForm)

                    this.collectForm = {
                        title: '',
                        icon: '',
                        href: ''
                    }
                    this.collectDialogVisible = false
                    this.save()
                }
                // this.collectForm
            }

        },
        async fnsearch() {
            if (this.searchType == '站内') {
                this.currentList = []
                // this.collectClass = []
                this.collectClass.forEach(item => {
                    item.childerList.forEach(item2 => {
                        if (item2.title.search(this.searchtxt) != -1 || item2.href.search(this.searchtxt) != -1) {
                            this.currentList.push(item2)
                        }
                    })
                })
                this.bgFilter = false;
                this.searchAnimation = false;
            } else {
                this.searchList.forEach(item => {
                    if (item.name == this.searchType) {
                        window.open(item.searchUrl + this.searchtxt)
                    }
                })
            }
        },



        // 下面是处理函数-------------------------------




        jump(href) {
            window.open(href)
        },
        mousedown(e) {
            var hander = (es) => {
                if (es.offsetX - e.offsetX < 0) {//向左拖拽
                    this.dragPrent = this.dragPrent - 10
                } else {
                    this.dragPrent = (es.offsetX - e.offsetX)
                    if (this.dragPrent > 0) {
                        setTimeout(() => {
                            this.dragPrent = 0
                        }, 500)
                    }
                }
            }
            this.$refs.dragBox.addEventListener('mousemove', hander)
            this.$refs.dragBox.addEventListener('mouseup', () => {
                this.$refs.dragBox.removeEventListener('mousemove', hander)
            })
            this.$refs.dragBox.addEventListener('mouseleave', () => {
                this.$refs.dragBox.removeEventListener('mousemove', hander)
            })
        },
        canplay() {
            this.vedioCanPlay = true
        },
        srcollDown() {
            this.scrollAnimation(0, 1100)
        },
        scrollAnimation(currentY, targetY) {
            // 获取当前位置方法
            // const currentY = document.documentElement.scrollTop || document.body.scrollTop

            // 计算需要移动的距离
            let needScrollTop = targetY - currentY
            let _currentY = currentY
            setTimeout(() => {
                // 一次调用滑动帧数，每次调用会不一样
                const dist = Math.ceil(needScrollTop / 10)
                _currentY += dist
                window.scrollTo(_currentY, currentY)
                // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
                if (needScrollTop > 10 || needScrollTop < -10) {
                    this.scrollAnimation(_currentY, targetY)
                } else {
                    window.scrollTo(_currentY, targetY)
                }
            }, 1)
        },
        handleScroll() {
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if (scroll < 0) {
                this.elm = 'scrollToDown'
            } else {//向下滚动 收起来
                this.elm = 'scrollToTop'
            }
        },

    },
    computed: {
        ...mapGetters([
            // 'isLogin',
            // // 'user',
            // 'progress'
        ]),
    },
    watch: {
        dragPrent(e) {
            if (e > 0) {
                setTimeout(() => {
                    this.dragPrent = 0
                }, 500)
            }
        },
        progress(e) {
            if (e.show) {
                this.fadeOut = false
                this.showProgress = true
            } else {
                this.fadeOut = true
                setTimeout(() => {//在500毫秒之前播放fadeout动画
                    this.showProgress = false
                    this.fadeOut = false
                }, 500)
            }
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/common.less";
@import "../../assets/css/animate.css";
.collectList {
    position: absolute;
    height: 54%;
    width: 80%;
    background: rgba(0, 0, 0, 0.6);
    top: 33%;
    left: 9%;
    transition: all 0.5s;
    border-radius: 1px;
    z-index: 3;
    .collectClass {
        width: 100%;
        background: #0c0c0c70;
        height: 44px;
        .collectItem {
            border-right: 1px solid #292929;
            height: 44px;
            line-height: 44px;
            text-align: center;
            display: inline-block;
            width: 70px;
            color: #bbbbbb;
            font-size: 10px;
            cursor: pointer;
            user-select: none;
            &:hover {
                background: #0c0c0c70;
            }
        }
        .collectEdit {
            &:hover {
                background: #0c0c0c70;
            }
        }
    }
    .collectConent {
        overflow-y: scroll;
        text-align: center;
        height: 89%;
        transition: all 0.5s;
        .collectSq {
            height: 132px;
            width: 13.5%;
            display: inline-block;
            text-align: center;
            line-height: 132px;
            position: relative;
            background: #3c3c3c85;
            margin: 8px 5px;
            padding: 0;
            transition: all 0.5s;
            &:hover {
                background: #61616185;
                transition: all 0.5s;
            }
            cursor: pointer;
            img {
                margin-top: 29px;
                object-fit: contain;
            }
            span {
                font-size: 10px;
                position: absolute;
                bottom: 27px;
                line-height: 20px;
                left: 5%;
                color: white;
                width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
        background: rgb(255, 44, 44);
    }
    100% {
        transform: rotateZ(360deg);
        background: red;
    }
}
.deleteBtn {
    animation: rotate 5s infinite !important;
    position: absolute;
    top: -6px;
    left: -6px;
    background: red;
    font-size: 4px;
    border-radius: 23px;
    width: 15px;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    height: 15px;
}
.editBtn {
    // background: #7d7d7d9c;
    padding: 7px 9px;
    border-radius: 1px;
    cursor: pointer;
    &:hover {
        background: #7d7d7d9c;
    }
}
.bgFilter {
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;
    filter: 3px;
    background: #000000a1;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.downarrow {
    position: absolute;
    z-index: 999;
    width: 100px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-50px);
    top: 84%;
    text-align: center;
    color: white;
    font-size: 3rem;
    animation: breath 2s infinite;
    transition: all 0.5s;
    cursor: pointer;
    &:hover {
        color: #f3c32a !important;
        transition: all 0.5s;
    }
}
@keyframes breath {
    0% {
        opacity: 1;
        top: 84%;
    }
    50% {
        opacity: 0.3;
        top: 86%;
    }
    100% {
        opacity: 1;
        top: 84%;
    }
}
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    // filter: blur(5px);
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    position: absolute;
    filter: blur(5px);
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
}
.el-header {
    transition: all 0.5s;
}
.el-footer {
    height: auto !important;
    background: rgb(46, 48, 51);
    color: white;
    padding: 2vh;
}
.scrollToTop {
    animation-name: scroll;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.scrollToDown {
    animation-name: scrollDown;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
@keyframes scroll {
    0% {
        top: 0;
    }
    100% {
        top: -70px;
    }
}
@keyframes scrollDown {
    0% {
        top: -70px;
    }
    100% {
        top: 0;
    }
}
.logoImg {
    position: absolute;
    z-index: 999;
    width: 300px;
    left: 50%;
    transform: translateX(-150px);
    top: 23%;
}
.logo_text {
    position: absolute;
    z-index: 999;
    width: 1000px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-500px);
    top: 38%;
    text-align: center;
    color: white;
    font-size: 2rem;
}
.logoInput {
    background: white;
    height: 50px;
    border-radius: 1px;
    position: absolute;
    z-index: 2;
    width: 600px;
    left: 50%;
    -webkit-transform: translateX(-250px);
    transform: translateX(-300px);
    top: 20%;
    transition: all 0.5s;
}
.logoInput input {
    height: 99%;
    width: 60%;
    border: none;
    background: #ff000000;
    outline: none;
    display: inline;
    padding-left: 10px;
}
.searchBtn {
    float: right;
    height: 50px;
    line-height: 50px;
    width: 74px;
    background: #232323;
    text-align: center;
    color: white;
    border-radius: 0 1px 1px 0;
    transition: all 0.5s;
    cursor: pointer;
    &:hover {
        background: #505050;
        transition: all 0.5s;
        width: 84px;
    }
}
</style>